import styles from './quickreply.less'
import { useState, useEffect } from 'react';
import { useIntl } from 'umi';
import { Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons';

import request from '@/utils/request';
import imgAttach from '@/images/reply/attach.svg';

interface DataProps {
  onSelected: Function
}

const QuickReply = function (props: DataProps) {
  const intl = useIntl();

  const [qrlist, setQrlist] = useState([])
  const [hoverItem, setHoverItem] = useState({})

  const [keyword, setKeyword] = useState('')
  useEffect(() => {
    getQuickReply()
  }, [])

  const getQuickReply = () => {
    request.get('/quickReply/get').then(res => {
      setQrlist(res.data.quickReplyList)
    })
  }

  const onHoverItem = (item: any) => {
    setHoverItem(item)
  }

  const onSelectItem = (item: any) => {
    props.onSelected(item)
  }

  const onChangeKeyword = (e: any) => {
    const { value } = e.target
    setKeyword(value)
  }

  return <div className={styles.qrcon}>
    <Input
      value={keyword}
      className={styles.searchInput}
      size="large"
      placeholder={intl.formatMessage({ id: 'search' })}
      prefix={<SearchOutlined />}
      onChange={onChangeKeyword}
    />
    <div className={styles.qrmain}>
      <div className={styles.qrleft}>
        <div  className={`${styles.qrlist} noscrollbar`}>
          
          {
          qrlist.map(n => (!keyword || (n.title + n.content).indexOf(keyword) >= 0) ? 
            <div
              key={n.id}
              className={styles.listItem}
              onMouseEnter={() => onHoverItem(n)}
              onClick={() => onSelectItem(n)}
            >
              <span>{n.title}</span>
              {n.attachmentList && n.attachmentList.length ? <img src={imgAttach} className={styles.itemicon} alt="" /> : null}
            </div> : ''
          )}
        </div>
      </div>
      <div className={styles.qrright}>
        {hoverItem.content}
      </div>
    </div>
    
  </div>
}

export default QuickReply